<template>
		<qiun-data-charts :canvas2d="true" type="pie" :opts="opts" :chartData="chartData" />
</template>

<script setup>
	import {
		reactive,
		ref,
		toRefs,
		onMounted
	} from 'vue'
	// import Empty from '../../components/empty.vue';
	const state = reactive({
		tabsList: [{
				name: '患者比例',
				component: 'patientProportion'
			},
			{
				name: '疾病统计',
				component: 'diseaseCount'
			},
			{
				name: '总体情况',
				component: 'overall'
			},
		]
	})
	// 点击tabs切换的小标
	const currentIndex = ref(0)
	// 患者比列数据
	const chartData = reactive({

		series: [{
			data: [{
				"name": "急诊科医患比",
				"value": 50,
			}, {
				"name": "急诊科护患比",
				"value": 30
			}, {
				"name": "急诊科各级患者比",
				"value": 20
			}, {
				"name": "急诊抢救室患者死亡率",
				"value": 18
			}, {
				"name": "急诊手术患者死亡率",
				"value": 8,
			}],
		}]
	})
	const opts = reactive({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [20, 20, 20, 20],
		margin: [5, 5, 5, 5],
		enableScroll: false,
		legend: { // 图例配置项
			show: true, // 是否显示图例，默认值为true // 图例的位置，可以是'rect'（矩形区域，如右侧或左侧）、'top'（顶部）、'bottom'（底部）等
			text: '我的自定义图例标题', // 图例的文本内容，这里可以设置为你想要的图例标题
			textStyle: { // 文本样式配置项
				color: '#000', // 字体颜色
				fontSize: '10px' // 字体大小
			}
		},
		extra: {
			pie: {
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: false,
				borderWidth: 3,
				borderColor: "#FFFFFF"
			}
		}
	})
	const {
		tabsList
	} = toRefs(state)

	const clicktabFn = (index, item) => {
		currentIndex.value = index
	}
	onMounted(() => {

	})
</script>

<style>
</style>